<template>
    <div class="report">
        <header>报警信息</header>
        <div class="alarm-list">
            <div class="alarm-item" v-for="alarm in alarms" :key="alarm.id">
                <div class="alarm-icon">
                    <i class="iconfont icon-loushui"></i> <!-- 假设这是管道漏损的图标 -->
                </div>
                <div class="alarm-info">
                    <div class="alarm-details">
                        <p class="alarm-message">{{ alarm.message }}</p>
                        <p class="alarm-address">{{ alarm.address }}</p>
                    </div>
                    <div class="alarm-time">
                        <p class="alarm-time1">{{ alarm.time1 }}</p>
                        <p class="alarm-time2">{{ alarm.time2 }}</p>
                    </div>

                </div>
                <div class="alarm-new">NEW</div>
            </div>
            <div class="more pointer">
                <a href="#">显示更多>></a>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
// const app = createApp(App);
// app.mount('#app');

// 报警信息数组
const alarms = ref([
    {
        id: 1,
        message: '13号管道漏损',
        address: '二楼教学楼主水管',
        time1: '2023-10-12',
        time2: '12:58:10',
    },
    {
        id: 2,
        message: '24号管道漏损',
        address: '行政楼进水主管',
        time1: '2023-10-12',
        time2: '18:51:45',
    },
    {
        id: 3,
        message: '48号表水流量超标',
        address: '三号男生宿舍总表',
        time1: '2023-10-12',
        time2: '10:08:17',

    },
    // ... 更多报警信息

]);


</script>

<style scoped>
.report {
    background-color: rgb(168, 193, 234);
    color: white;
    padding: 20px;
    width: 30%;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header {
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
    color: rgb(255, 0, 0);
    letter-spacing: 10px;

}

.alarm-list {
    background-color: #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alarm-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.alarm-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: rgb(20, 94, 213);
    border-radius: 50%;
    color: rgb(255, 255, 255);
    font-size: 24px;
}

.alarm-info {
    flex-grow: 1;
    padding: 0 10px;


}

.alarm-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.alarm-address {
    margin: 5px 0;
    color: white;
}

.alarm-message {
    color: rgb(255, 0, 0);
}

.alarm-time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;

}

.alarm-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    padding: 0 10px;
}

.alarm-time1,
.alarm-time2 {
    margin: 0;
    font-size: 15px;
    color: #0ff;
}

.alarm-new {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    background-color: rgb(255, 0, 0);
    border-radius: 10px;
    color: #ddd;
    font-weight: bold;
    margin-left: 10px;
    font-size: 15px;
}

.more {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 10px;
    /* 保持这个样式以避免与其他元素重叠 */
}

.more a {
    color: #0ff;
    text-decoration: none;
    font-weight: bold;
    background-color: #ddd;
    padding: 5px 10px;
    border-radius: 5px;
}

.icon-leak:before {
    content: "\f07d";
    /* Water droplet icon (fa-tint) */
}

.icon-flow:before {
    content: "\f06c";
    /* Arrows counterclockwise icon (fa-sync-alt) */
}
</style>